<template>
  <view
    :style="{width:width}"
    :class="{'select-btn-button':type=='button','select-btn-selected':selected,'select-btn-defalut':!selected,'select-btn-disabled':disabled}"
    class="select-btn"
  >
    <text>{{ name }}</text>
    <view v-if="selected&&type!='button'" class="check-icon">
      <text class="iconfont">&#xe607;</text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    width: {
      type: String,
      defalut() {
        return "30%";
      }
    },
    height: {
      type: String,
      defalut: "100rpx"
    },
    name: {
      type: String,
      defalut: ""
    },
    selected: {
      type: Boolean,
      defalut: true
    },
    type: {
      type: String,
      defalut: "selceted"
    },
    disabled: {
      type: Boolean,
      defalut: false
    }
  },
  data() {
    return {};
  },
  computed: {},
  mounted() {
    // console.log("width", this.width, this.height, this.selected);
  }
};
</script>

<style scoped lang="scss">
@import "@/static/iconfont/iconfont.css";
$selectColor: hsla(211, 100%, 50%, 0.342);
.select-btn {
  position: relative;
  box-sizing: border-box;
  padding: 15rpx 20rpx;
  text-align: center;
  margin-bottom: 20rpx;
  font-size: 30rpx;
  // height: 80rpx;
  // line-height: 80rpx;
  // vertical-align: middle;
  .check-icon {
    position: absolute;
    right: -4rpx;
    bottom: -6rpx;
    color: $uni-color-primary;
    font-size: 20rpx;
  }
}
.select-btn-selected {
  background-color: $selectColor;
  // border: solid 1px $selectColor;
  color: $uni-color-primary;
}
.select-btn-defalut {
  background-color: $uni-bg-color-grey;
}
.select-btn-button {
  border: 1px solid $uni-color-primary;
  color: $uni-color-primary;
  background-color: #fff;
}
.select-btn-disabled {
  border: 1px solid $uni-bg-color-grey;
  color: #999999;
  background-color: $uni-bg-color-grey;
}
</style>
